<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/banner1.css">
</head>
<body>
    <div class="list">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <ul class="btns">
            <li class="choose"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="prev">
            <div class="left-arrow"></div>
        </div>
        <div class="next">
            <div class="right-arrow"></div>
        </div>
    </div>
    <!-- 引入jq文件 -->
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        // 初始化默认状态
        var $list = $(".list");
        var $imgs = $(".list img");
        var $btns = $(".btns li");
        var $prev = $(".prev");
        var $next = $(".next");
        var index = 0;
        var num;
        // 循环定时器
        var timebar;

        // 默认显示第一张图片
        $imgs.eq(index).css("left",0);


        // 轮播图
        function startInterval() {
            // 3秒切换一张图片
            timebar = setInterval(changeImage,3000)

        }

        function changeImage(fn) {
            // 前一张向前移动
            $imgs.eq(index).stop(true).animate({left:-520},500);

            // 显示下一张
            index++;

            // 判断右侧边界,重置索引
            if (index > 4) {
                index=0
            }

            // 下一张放到到待切换的位置，在向做移动本省宽度, 启动循环定时器
            $imgs.eq(index).css("left", 520).stop(true).animate({left:0}, 500, function () {
                // 执行结束判断是否开启循环定时器，存在就唤起不存在不运行
                fn && fn();
            });

            // 设置下方圆点轮播
            $btns.eq(index).addClass("choose").siblings().removeClass("choose");
        }

        // 启动轮播图
        startInterval()

        // 移动到图片上显示左右按钮
        $list.mouseenter(function () {
            $prev.css({"visibility":"visible"});
            $next.css({"visibility":"visible"});
        })

        $list.mouseleave(function () {
            $prev.css({"visibility":"hidden"});
            $next.css({"visibility":"hidden"});
        })

        // 点击箭头切换左右
        // 右侧箭头
        $next.click(function () {
            // 1.清除定时器
            clearInterval(timebar);
            // 2.更改索引值(边界处理)
            // 3.启动定时器切换动画
            changeImage(startInterval)

        });

        // 点击左侧箭头切换
        $prev.click(function () {
            // 1.清除定时器
            clearInterval(timebar);
            // 前一张右滑
            $imgs.eq(index).stop(true).animate({left:520},500);

            // 2.更改索引值(边界处理)
            index--;

            if (index<0) {
                // 定位到最后
                index = 4
            }

            // 下一张放到到待切换的位置，在向做移动本省宽度, 启动循环定时器
            $imgs.eq(index).css("left", -520).stop(true).animate({left:0}, 500, startInterval);
            
            // 设置下方圆点轮播
            $btns.eq(index).addClass("choose").siblings().removeClass("choose");
        })

        // 下侧圆点切换图片位置

        // 点击圆点直接切换
        $btns.click(function(){
            // 1.停止动画
            clearInterval(timebar);
            // 2.获取圆点位置
            node_index = $(this).index(); 

            // 对比
            if (node_index > index){
                // 前一张移动走
                $imgs.eq(index).stop(true).animate({left:-520},500);
                index = node_index
                
                // 把这张照片移动到前面
                $imgs.eq(index).css("left", 520).stop(true).animate({left:0}, 500, startInterval);

                // 设置下方圆点轮播
                $btns.eq(index).addClass("choose").siblings().removeClass("choose");
            } else if (node_index < index) {
                // 前一张右滑
                $imgs.eq(index).stop(true).animate({left:520},500);
                // 2.更改索引值(边界处理)
                index = node_index;
                
                // 下一张放到到待切换的位置，在向做移动本省宽度, 启动循环定时器
                $imgs.eq(index).css("left", -520).stop(true).animate({left:0}, 500, startInterval);
                
                // 设置下方圆点轮播
                $btns.eq(index).addClass("choose").siblings().removeClass("choose");
            } else {
                startInterval();
            }
        })
    </script>
</body>
</html>